<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .del{text-decoration: line-through}
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var app5 = new Vue({
                el: '#app-5',
                methods: {
                    addthing: function(){
                        this.things.push ({thing:this.thing});
                    },
                    switchdel:function(idx){
                        this.todos[idx].done=!this.todos[idx].done;
                    }
                },
                data:{

                    things:null,
                    todos:[
                        {name:'吃饭',done:false},
                        {name:'睡觉',done:false},
                        {name:'哈哈哈',done:true}
                    ]
                }
            })
        }

    </script>
</head>
<body>
<div id="app-5">
    <input type="text" v-model="thing">
    <button v-on:click="addthing">添加</button>
    <input v-model="things">
    <div v-for="(todo,idx) in todos">
       <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(idx)">{{idx}},
        <span v-bind:class="{del: todo.done}">
            {{todo.name}}
        </span>
    </div>
    总共{{todo.length}}个事项
</div>
</body>
</html>